<template>
  <div>
    <form action="/">
      <van-search
        v-model="value"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
        @cancel="$router.go(-1)"
      />
    </form>
    <ul class="outside">
      <li
        class="inside"
        v-for="(item, index) in list"
        :key="index"
        @click="choose(item.communityName)"
      >
        {{ item.communityName }}
      </li>
    </ul>
  </div>
</template>

<script>
import { keywordQueries } from '@/api/article'

export default {
  name: 'search-page',
  data () {
    return {
      value: '',
      list: []
    }
  },
  methods: {
    async onSearch () {
      if (this.value.trim()) {
        const params = { name: this.value, id: this.$store.state.user.value }
        const { body } = await keywordQueries(params)
        this.list = body
      }
    },
    choose (data) {
      this.$store.commit('user/cellSelection', data)
      this.$router.go(-1)
    }
  }
}
</script>

<style lang="less" scoped>
.outside {
  padding: 0 8px 8px;
  line-height: 50px;
  position: absolute;
  top: 50px;
  width: 100%;
  background-color: #fff;
  font-size: 15px;
  .inside {
    padding-left: 2px;
    border-bottom: 1px solid #f6f5f6;
  }
}
</style>
